

import "./index.less"
import {useRef,useState,useEffect} from "react"
import errorbg from "@/assets/images/503.png"
import {Progress } from 'antd'
import {history} from "umi"

export default function Error503(){
  const bgstar:any = useRef();
  interface slist {
    x:number,
    y:number,
    scaler:number,
    rate:number,
    rgba:string,
    rgb:string
  }
  const [spanList,setSpanList] = useState<Array<slist>>([])
  let [percent,setPercent]  = useState<number>(0);
  useEffect(()=>{ 
    spanInit()
    let timer:any = setInterval(()=>{
      if(percent<100){
        percent += 5;
        setPercent(percent);
      }else{
        clearInterval(timer)
        timer = null; 
        history.push("/login")
      }

      // 组件删除后销毁 计时器
      return ()=>{
        clearInterval(timer)
        timer = null; 
      }
    },100)
  },[])

  const changePercent=()=>{
    setPercent(++percent)
  }

  const spanInit = ()=>{
    var maxWidth =  bgstar.current.clientWidth;
    var maxHeight = bgstar.current.clientHeight;
    for(var i=0;i<520;i++){
      //  随机位置
      var x = Math.floor(Math.random()* maxWidth) ;
      var y = Math.floor(Math.random()* maxHeight) ;
      //  随机大小
      var scaler = Math.random() * 1.5;
      // 随机频率  S 
      var rate = Math.random() * 2.5 ;  
      // 随机的颜色
      var r = Math.floor(Math.random() * 255 );
      var g = Math.floor(Math.random() * 255 );
      var b = Math.floor(Math.random() * 255 );
      var opc = Math.random() * 1;
      spanList.push({
        x,
        y,
        scaler,
        rate,
        rgba:`rgba(${r},${g},${b},${opc})`,
        rgb:`rgb(${r},${g},${b})`
      })
      setSpanList([...spanList])
    }
  }

  const gotowhere = ()=>{
    history.push("/login")
  }
   
  return (
    <div className="errorpage" ref={bgstar} id="bgstar">
      <div className="dao" onClick={gotowhere}>
      <Progress  type="circle" percent={percent}  ></Progress>
      </div>
       <img src={errorbg} alt="" className="mimg" />
       {
         spanList.map((l,i)=>(
           <span key={i}
            className="spandot"
            style={{
              top:l.y+'px',
              left:l.x+'px',
              transform:'scale('+l.scaler+')',
              background:l.rgb,
              animationDelay:l.rate + 's'
            }}
           > 
           </span>
         ))
       }
    </div>
  )
}